<extend name="CarBase"/>
<block name="body">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/Car/style.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/Car/Calculator/jijia.css" media="all">
<script type="text/javascript" src="__PUBLIC__/js/Car/Calculator/jquery-1.8.0.min.js"></script>


<div class="m_height">
    <div id="topLayer" class="top_layer">机动车交通违法信息查询</div>

    <div id="shangyeDiv" class="jsq-box">
        <ul>
            <li id="liCheXinX" class="jsq-item-click" data-action="popup-CheXinX">
                <div class="jsq-item-txt">车辆类型<span id="CheXinPeiFu" style="font-size: 14px;color: #000000">小型汽车</span>
                </div>
            </li>
            <li id="liDiQuX" class="jsq-item-click" data-action="popup-DiQuX">

                <div class="jsq-item-txt">地区<span id="DiQuPeiFu" style="font-size: 14px;color: #000000">浙</span>
                </div>

            </li>
        </ul>
    </div>


    <div class="xj-form">
        <div class="xj-user-info-box">
            <div class="xj-user-info">
                <span>车牌</span>
                <input id="hphm" type="text" class="current" placeholder="例：D8270R" style="text-align: left; ">
            </div>
        </div>
        <div class="xj-user-info-box">
            <div class="xj-user-info">
                <span>发动机号</span>
                <input id="fdjh" type="text" class="current" placeholder="末6位" style="text-align: left;">
            </div>
        </div>
    </div>
    <div class="m-jsq-btn-box">
        <a id="startCal" href="javascript:void(0)" class="btn-one btn-orange">立刻查询</a>
    </div>
</div>


<!-------车辆类型------>
<div id="backCheXin" class="leftmask leftmaskCheXinX" style="display: none;"></div>
<div class="leftPopup popup-CheXinX" data-back="leftmaskCheXinX" style="display: none; z-index: 30">
    <div class="swipeLeft swipeLeft-sub">
        <dl id="CheXinXDl" class="tt-list">
            <dd class="">
                <a>
                    <p value="01">大型汽车</p>
                </a>
            </dd>
            <dd class="current">
                <a>
                    <p value="02">小型汽车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="03">使馆汽车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="04">领馆汽车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="05">境外汽车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="06">外籍汽车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="07">普通摩托车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="08">轻便摩托车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="09">使馆摩托车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="10">领馆摩托车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="11">境外摩托车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="12">外籍摩托车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="13">农用运输车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="14">拖拉机</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="15">挂车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="16">教练汽车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="17">教练摩托车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="18">试验汽车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="19">试验摩托车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="20">临时入境汽车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="21">临时入境摩托车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="22">临时行驶车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="23">警用汽车</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p value="24">警用摩托</p>
                </a>
            </dd>
        </dl>
    </div>
</div>
<script type="text/javascript">

    $(function () {
        //右侧侧附加选择层

        (function () {
            var iscroll = false;
            $('[data-action=popup-CheXinX]').rightSwipe({
                clickEnd: function (b) {
                    var $leftPopup = this;
                    if (b) {
                        var $back = $('.' + $leftPopup.attr('data-back'));
                        $back.touches({ touchstart: function (ev) {
                            ev.preventDefault();
                        }, touchmove: function (ev) {
                            ev.preventDefault();
                        } });
                        var $swipeLeft = $leftPopup.find('.swipeLeft');

                        if (!iscroll) {
                            iscroll = true;
                            $leftPopup.myScroll = new IScroll($swipeLeft[0], {
                                probeType: 1,
                                snap: 'dd',
                                momentum: true,
                                click: true
                            });
                        }
                    } else {
                        $leftPopup.myScroll.scrollTo(0, 0, 0, false);
                    }
                }
            });
        })();

        $("#CheXinXDl a").on("click", function () {
            $("#CheXinXDl dd").attr("class", "");
            $(this).parent().attr("class", "current");
            //calcAutoCashAll();
            CheXinSel();
            $("#backCheXin").trigger("close");
        });
    });
</script>

<!-------车辆地区------>
<div id="backDiQu" class="leftmask leftmaskDiQuX" style="display: none;"></div>
<div class="leftPopup popup-DiQuX" data-back="leftmaskDiQuX" style="display: none; z-index: 50">
    <div class="swipeLeft swipeLeft-sub">
        <dl id="DiQuXDl" class="tt-list">
            <dd class="current"><a><p value="浙">浙</p></a></dd>
            <dd class=""><a><p value="藏">藏</p></a></dd>
            <dd class=""><a><p value="川">川</p></a></dd>
            <dd class=""><a><p value="鄂">鄂</p></a></dd>
            <dd class=""><a><p value="甘">甘</p></a></dd>
            <dd class=""><a><p value="赣">赣</p></a></dd>
            <dd class=""><a><p value="桂">桂</p></a></dd>
            <dd class=""><a><p value="贵">贵</p></a></dd>
            <dd class=""><a><p value="黑">黑</p></a></dd>
            <dd class=""><a><p value="沪">沪</p></a></dd>
            <dd class=""><a><p value="吉">吉</p></a></dd>
            <dd class=""><a><p value="冀">冀</p></a></dd>
            <dd class=""><a><p value="津">津</p></a></dd>
            <dd class=""><a><p value="晋">晋</p></a></dd>
            <dd class=""><a><p value="京">京</p></a></dd>
            <dd class=""><a><p value="辽">辽</p></a></dd>
            <dd class=""><a><p value="鲁">鲁</p></a></dd>
            <dd class=""><a><p value="蒙">蒙</p></a></dd>
            <dd class=""><a><p value="闽">闽</p></a></dd>
            <dd class=""><a><p value="宁">宁</p></a></dd>
            <dd class=""><a><p value="青">青</p></a></dd>
            <dd class=""><a><p value="琼">琼</p></a></dd>
            <dd class=""><a><p value="陕">陕</p></a></dd>
            <dd class=""><a><p value="苏">苏</p></a></dd>
            <dd class=""><a><p value="皖">皖</p></a></dd>
            <dd class=""><a><p value="湘">湘</p></a></dd>
            <dd class=""><a><p value="新">新</p></a></dd>
            <dd class=""><a><p value="渝">渝</p></a></dd>
            <dd class=""><a><p value="豫">豫</p></a></dd>
            <dd class=""><a><p value="粤">粤</p></a></dd>
            <dd class=""><a><p value="云">云</p></a></dd>
        </dl>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //右侧侧附加选择层
        (function () {
            var iscroll = false;
            $('[data-action=popup-DiQuX]').rightSwipe({
                clickEnd: function (b) {
                    var $leftPopup = this;
                    if (b) {
                        var $back = $('.' + $leftPopup.attr('data-back'));
                        $back.touches({ touchstart: function (ev) {
                            ev.preventDefault();
                        }, touchmove: function (ev) {
                            ev.preventDefault();
                        } });
                        var $swipeLeft = $leftPopup.find('.swipeLeft');

                        if (!iscroll) {
                            iscroll = true;
                            $leftPopup.myScroll = new IScroll($swipeLeft[0], {
                                probeType: 1,
                                snap: 'dd',
                                momentum: true,
                                click: true
                            });
                        }
                    } else {
                        $leftPopup.myScroll.scrollTo(0, 0, 0, false);
                    }
                }
            });
        })();

        $("#DiQuXDl a").on("click", function () {
            $("#DiQuXDl dd").attr("class", "");
            $(this).parent().attr("class", "current");
            //calcAutoCashAll();
            DiQuSel();
            $("#backDiQu").trigger("close");
        });
    });
</script>

<script>
    var idCheXinValue = "02";
    var idDiQuValue = "浙";

    $(function () {

        $("#startCal").on("click", function () {
            var hphm  = $("#hphm").val();
            var fdjh = $("#fdjh").val();

//            $.ajax({
//                type: 'POST',
//                url: '__PUBLIC__/sxga.php',
//                data: "hphm="+hphm+"&fdjh="+fdjh+"&fzjgjc="+idDiQuValue+"&hpzl="+idCheXinValue,
//                success: function(msg){
//                    alert( "Data Saved: " + msg );
//                }
//            });


            location.href = "__PUBLIC__/sxga.php?hphm="+hphm+"&fdjh="+fdjh+"&fzjgjc="+idDiQuValue+"&hpzl="+idCheXinValue;
           // location.href = "http://www.sxol.com/post.php?hphm="+hphm+"&fdjh="+fdjh+"&fzjgjc="+idDiQuValue+"&hpzl="+idCheXinValue;
            //location.href = "http://wscgs.sxga.gov.cn/wap/vehvio.do?hphm="+hphm+"&fdjh="+fdjh+"&fzjgjc="+idDiQuValue+"&hpzl="+idCheXinValue
        });
    });

    //车型
    function CheXinSel() {
        idCheXinValue = $("#CheXinXDl").find(".current").find("p").attr("value");
        var idHtml = $("#CheXinXDl").find(".current").find("p").html();
        $("#CheXinPeiFu").text(idHtml);
    }

    //地区
    function DiQuSel() {
        idDiQuValue = $("#DiQuXDl").find(".current").find("p").attr("value");
        var idHtml = $("#DiQuXDl").find(".current").find("p").html();
        $("#DiQuPeiFu").text(idHtml);
    }

</script>


<script src="__PUBLIC__/js/Car/Calculator/iscroll-infinite.js"></script>
<script src="__PUBLIC__/js/Car/Calculator/popup.js"></script>

</block>